<template>
  <KView class="auction-view-item" :class="`auction-view-item__${goods.type}`" @click="itemClick">
    <KView class="auction-view-pic">
      <sys-image class="auction-goods-img" :src="goods.pic" mode="auto" :radius="8"></sys-image>
      <KView class="auction-view-time">
        <span>{{$moment(goods.startTime).format('MM.DD HH:mm')}}</span>
        <span> - </span>
        <span>{{$moment(goods.endTime).format('MM.DD HH:mm')}}</span>
      </KView>
    </KView>
    <KView class="auction-view-item-content clearfix">
      <KView class="auction-view-item-info">
        <KView class="auction-view-item-name">{{goods.name}}</KView>
        <KView class="auction-view-item-type">{{goods.typeText}}</KView>
      </KView>
      <KView class="auction-view-item-price">
        <KView class="auction-view-item-data">¥{{goods.price}}</KView>
        <KView class="auction-view-item-text">{{goods.priceText}}</KView>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SysImage from 'common/sysImage';

  export default {
    props: {
      goods: {
        type: Object,
        required: true
      }
    },

    data() {
      return {};
    },

    methods: {
      itemClick() {
        this.$emit('item-click', this.goods);
      }
    },

    components: {
      SysImage
    }
  };

</script>

<style lang="scss">
  .auction-view-item {
    height: 100%;

    .auction-view-pic {
      height: calc(#{formatPx(325)} - 2px);
      border: 1px solid #F0F0F0;
      border-radius: 8px;
      overflow: hidden;
      position: relative;

      .auction-view-time {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: formatPx(40);
        line-height: formatPx(40);
        color: #ffffff;
        text-align: center;
        font-size: formatPx(24);
      }
    }

    .auction-view-item-content {
      margin-top: formatPx(15);
      height: calc(100% - #{formatPx(340)});

      .auction-view-item-info {
        float: left;
        width: formatPx(190);

        .auction-view-item-name {
          font-size: formatPx(28);
          color: #2f3135;
          height: formatPx(60);
          line-height: formatPx(30);

          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .auction-view-item-type {
          width: formatPx(132);
          height: formatPx(46);
          font-size: formatPx(24);
          text-align: center;
          line-height: formatPx(46);
          color: #ffffff;
          border-radius: formatPx(23);
        }
      }

      .auction-view-item-price {
        float: right;
        width: formatPx(130);
        padding-top: formatPx(12);

        .auction-view-item-data {
          text-align: center;
          color: #ff1f1f;
          font-size: formatPx(34);
          height: formatPx(48);
          line-height: formatPx(48);
          font-weight: bold;
        }

        .auction-view-item-text {
          text-align: center;
          color: #666666;
          font-size: formatPx(26);
        }
      }
    }

    &.auction-view-item__0 {
      .auction-view-pic .auction-view-time {
        background: #ff6f2f;
      }

      .auction-view-item-content .auction-view-item-info {
        .auction-view-item-type {
          background: #ff6f2f;
        }
      }
    }

    &.auction-view-item__1 {
      .auction-view-pic .auction-view-time {
        background: #fd3a3a;
      }

      .auction-view-item-content .auction-view-item-info {
        .auction-view-item-type {
          background: #fd3a3a;
        }
      }
    }

    &.auction-view-item__2 {
      .auction-view-pic {
        .auction-goods-img {
          opacity: 0.4;
        }

        .auction-view-time {
          background: #e0e0e0;
        }
      }

      .auction-view-item-content .auction-view-item-info {
        .auction-view-item-name {
          color: #acacad;
        }

        .auction-view-item-type {
          background: #e0e0e0;
        }
      }
    }
  }

</style>
